import React from 'react';
import { Row, Col, Card, Button, List } from 'antd';
import './BottomSection.css';

// 图片资源（使用CDN链接或本地路径）
const images = {
  aiAssistant: '202503220046097.webp',
  versionControl: '202503220045505.webp',
  onlineDebug: '202503220045925.webp',
  cloudBackup: '202503220046166.webp'
};

const BottomSection = () => {
  const features = [
    '本地化管理',
    '版本控制',
    'AI生成与优化',
    '云端备份',
    '分享与社区',
    '在线调试提示词'
  ];

  const featureCards = [
    {
      image: images.aiAssistant,
      iconBg: '#fce7f3', // pink-100
      title: 'AI助手',
      description: '智能AI助手可一键生成专业提示词，优化现有提示词结构，帮您解决创作瓶颈。'
    },
    {
      image: images.versionControl,
      iconBg: '#fce7f3', // pink-100
      title: '版本控制',
      description: '每个提示词支持多版本管理，记录修改历史，随时回滚到之前的版本。'
    },
    {
      image: images.onlineDebug,
      iconBg: '#f3e8ff', // purple-100
      title: '在线调试',
      description: '配置自己的APIKEY,即可开始在线调试提示词。'
    },
    {
      image: images.cloudBackup,
      iconBg: '#f3e8ff', // purple-100
      title: '云端备份',
      description: '支持将数据备份到云端，使用邮箱和自定义密钥进行身份验证，确保数据安全。'
    }
  ];

  return (
    <div className="home-bottom-section">
      {/* 特性介绍部分 */}
      <div className="container mx-auto px-4 py-20">
        <Row gutter={[48, 48]} align="middle">
          {/* 左侧文本内容 */}
          <Col xs={24} lg={12}>
            <div className="feature-text-content">
              <span className="feature-subtitle">提升AI创作效率</span>
              <h2 className="feature-title">让AI提示词管理更简单</h2>
              <p className="feature-description">让生产力加倍的 AI 快捷指令</p>

              <List
                dataSource={features}
                renderItem={(item) => (
                  <List.Item className="feature-list-item">
                    <span className="feature-check">✅</span>
                    <span>{item}</span>
                  </List.Item>
                )}
              />
            </div>
          </Col>

          {/* 右侧卡片内容 */}
          <Col xs={24} lg={12}>
            <Row gutter={[16, 16]}>
              {featureCards.map((card, index) => (
                <Col
                  key={index}
                  xs={24}
                  md={12}
                  className={`feature-card-col ${index >= 2 ? 'lg-mt-20' : ''}`}
                >
                  <Card
                    className="feature-card"
                    hoverable
                  >
                    <div
                      className="feature-card-icon-container"
                      style={{ backgroundColor: card.iconBg }}
                    >
                      <img
                        src={card.image}
                        alt={card.title}
                        className="feature-card-image"
                      />
                    </div>
                    <h3 className="feature-card-title">{card.title}</h3>
                    <p className="feature-card-description">{card.description}</p>
                  </Card>
                </Col>
              ))}
            </Row>
          </Col>
        </Row>
      </div>

      {/* CTA部分 */}
      <div className="cta-section">
        <div className="container mx-auto px-4 py-16 text-center">
          <h2 className="cta-title">不仅仅是一个提示词管理工具</h2>
          <p className="cta-description">
            PromptPlus是您AI创作的得力助手，帮助您管理、优化和分享提示词，提升创作效率和质量。
          </p>
          <Button
            type="primary"
            size="large"
            className="cta-button"
            href="/my-prompts"
          >
            立即体验
          </Button>
        </div>
      </div>
    </div>
  );
};

export default BottomSection;
